<template>
    <div class="box-group-wrap">
        <p class="title">
            <span style="width:65px;">呼叫历史</span>
            <span class="showmore" @click="showHistoryMore">查看更多</span>
        </p>
        <!-- <div class="line"></div> -->
        <div v-if="serveHistoryList.length === 0" class="nodatalist">
            <img src="@/assets/img/khindex/nuMessage.png" alt width="40px" />
            <p>暂无呼叫历史</p>
        </div>
        <div v-else class="trainingMain">
            <el-scrollbar wrap-class="side-bar-scrollbar-wrap">
                <ul>
                    <div class="listLine"></div>
                    <li v-for="item in serveHistoryList" :key="item.name">
                        <span class="blueCirle"></span>

                        <i class="telzt">{{ item.direction === 'in' ? '呼入' : '呼出'}}</i>
                        <i class="trainDate trainingDate">
                            <i class="date">{{ item.loginId}}</i>
                        </i>
                        <!-- 响铃时间 -->
                        <i class="HistortTime">{{ item.ringTime }}</i>
                    </li>
                </ul>
            </el-scrollbar>
        </div>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="dialogFlag"
            append-to-body
            center
            width="1200px"
        >
            <div slot="title">呼叫历史</div>
            <el-table :data="serveMoreHistoryList" width="100%" stripe border class="heard-bg">
                <el-table-column label="通话方向" prop="direct" width="100px" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ scope.row.direction =='in' ? '呼入' : '呼出'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="开始时间" prop="answerTime" width="150px" show-overflow-tooltip></el-table-column>
                <!-- <el-table-column label="CTI工号" prop="ctiNo"></el-table-column> -->
                <el-table-column label="被叫号码" prop="dnis" width="120px" show-overflow-tooltip></el-table-column>
                <el-table-column label="呼叫号码" prop="ani" width="120px" show-overflow-tooltip></el-table-column>

                <el-table-column
                    label="通话时长"
                    prop="callLongSFM"
                    width="120px"
                    show-overflow-tooltip
                ></el-table-column>
                <!-- <el-table-column
                    label="结束时间"
                    prop="releaseTime"
                    width="180px"
                    show-overflow-tooltip
                ></el-table-column>-->
                <el-table-column label="坐席工号" prop="loginId" width="100px" show-overflow-tooltip></el-table-column>
                <el-table-column label="坐席姓名" prop="agentName" width="100px" show-overflow-tooltip></el-table-column>
                <!-- <el-table-column label="来电原因" prop="reasonTypeValue"></el-table-column> -->
                <el-table-column label="来电详因" prop="reasonValue" show-overflow-tooltip></el-table-column>
                <el-table-column
                    label="是否接通"
                    prop="isconnected"
                    width="100px"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <span>{{scope.row.isconnected==1 ? "接通" : "未接通"}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <Pagination
                    :hanleChangeCurrentPage="hanleChangeCurrentPage"
                    :handleChangeSize="handleChangeSize"
                    :currentPage="currentPage"
                    :pageSize="pageSize"
                    :total="total"
                />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Pagination from '../../components/Pagination/Pagination.vue';

export default {
    name: 'serveHistory',
    components: {
        Pagination,
    },
    data() {
        return {
            serveHistoryList: [],
            serveMoreHistoryList: [],
            defaultCardInfo: this.$store.getters.cardInfo_3004, // 信用卡信息 可以用多卡 3004按卡号查询卡资料信息
            dialogFlag: false,
            // 当前页码
            currentPage: 0,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
        };
    },
    // 取缓存信息
    computed: {
        ...mapGetters([
            'customerInfo_3002',
            'cardInfo_3004',
        ]),
    },
    watch: {
        customerInfo_3002(newValue, oldValue) {
            // if (newValue.CUSTID !== oldValue.CUSTID) {
            this.getserveHistory();
            // }
        },
        cardInfo_3004(newValue, oldValue) {
            this.getserveHistory();
        }
    },
    mounted() {
        this.getserveHistory();
    },
    methods: {
        showHistoryMore() {
            this.dialogFlag = true;
            this.getData(2);
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getData(2);
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getData(2);
        },
        getData(data) {
            // 获取呼叫历史表格数据
            let pageNum = 0;
            let pageSize = 5;
            if (data === 1) {
                pageNum = 1;
                pageSize = 5;
            } else {
                pageNum = this.currentPage;
                pageSize = this.pageSize;
            }
            const params = {
                pageNum,
                pageSize,
                custNo: '', // 客户号
                // idNo: this.defaultCardInfo.CUSTID, // 证件号
                idNo: this.cardInfo_3004.CUSTID,
                MOBILEPHONE: this.customerInfo_3002.MOBILEPHONE,
            };
            // if (!params.custNo) {
            //   return;
            // }
            console.log("params==", params);
            this.$post.customer.getPageByCust(params).then((res) => {
                if (res.data.success) {
                    if (data === 1) {
                        this.serveHistoryList = res.data.content.callList;
                    }
                    this.serveMoreHistoryList = res.data.content.callList;
                    this.total = res.data.content.callCount;
                }
            });
        },
        // 服务历史
        getserveHistory() {
            this.getData(1);
        },
    },
};
</script>

<style scoped lang="scss">
.trainingMain {
    .HistortTime {
        float: right;
        margin-right: 15px;
    }
}

.trainDate {
    width: 31%;
}
.telzt {
    width: 20%;
}
.traintime {
    width: 44%;
}
.pagination {
    margin-top: 20px;
    text-align: right;
}
.showmore:hover {
    cursor: pointer;
}
</style>
